<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            display: flex;
            border-bottom: 1px solid #aaa;
            height: 60px;
            align-items: center;
        }
        img{
            width: 40px;
        }
    </style>
</head>
<body>
    <div>
        <!-- ul>li>img+(div>span*3)+span+h4+p -->
        <ul>
            
        </ul>
    </div>
    <script>
        // 1.先获取数据,使用ajax
        // 2.先创建一个实例对象
        var xhr = new XMLHttpRequest();
        // 3.配置请求信息(请求方式,路径,参数)
        xhr.open("get","https://cnodejs.org/api/v1/topics?page=2");
        // 4.发送请求
        xhr.send();
        // 5.添加监听请求事件
        xhr.onreadystatechange = function(){
            // 6.监听在请求响应结束后获取数据
            if(xhr.readyState === 4){
                // 7.获取响应数据
                var data = JSON.parse(xhr.responseText).data;
                console.log(data);
                // 8.搭建基本页面标签架构(将结构与数据结合)
                var str = '';
                // 9.将架构与数据相结合(循环数据)
                for(var i = 0;i < data.length;i++){
                    // 10.根据数据的数量,拼接标签
                    str += `<li>
                                <img src="${data[i].author.avatar_url}" alt="">
                                <div>
                                    <span>${data[i].reply_count}</span>
                                    /
                                    <span>${data[i].visit_count}</span>
                                </div>
                                <h4>${data[i].title}</h4>
                            </li>`;
                }
                // 11.查看是否已创建相同数量的标签结构
                // console.log(str);
                document.querySelector("ul").innerHTML = str;
            }
        }



    </script>
</body>
</html> 